<template>
  <el-dialog
    :visible.sync="dialogConf.show"
    :width="dialogConf.width"
    @closed="closed"
  >
    <template #title>
      <div class="dialogTitle">{{ dialogConf.title }}</div>
    </template>
    <my-form
      ref="form"
      :layout="elRows"
      :model="row"
      :form-conf="formConf"
      :btn-conf="btnConf"
      @btnClick="btnClick"
    >
    </my-form>
  </el-dialog>
</template>

<script>
import MyForm from '@/components/base/myForm'

export default {
  name: 'Modify',
  components: { MyForm },
  props: {
    dialogConf: {
      type: Object,
      default() {
        return { show: true, title: '修改', width: '800px' }
      }
    },
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      btnConf: {
        buttons: [{ name: '提交', type: 'primary' }, { name: '取消' }]
      },
      formConf: {
        labelWidth: '100px',
        rules: {
          name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
        }
      },
      elRows: [
        {
          elCols: [
            {
              span: 12,
              elFormItem: {
                prop: 'name',
                label: '项目名称',
                type: 'input'
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 23,
              elFormItem: {
                prop: 'description',
                label: '项目描述',
                type: 'textarea',
                autosize: { minRows: 6, maxRows: 10 }
              }
            }
          ]
        }
      ]
    }
  },
  created() {},
  mounted() {},
  methods: {
    async btnClick(btnItem) {
      try {
        if (btnItem.name === '提交') {
          let validFlag = false
          this.$refs.form.$refs.form.validate((valid) => {
            validFlag = valid
          })
          if (validFlag) {
            const params = Object.assign({}, this.row)
            btnItem.loading = true
            const data = await this.$axios.post('/project/modify', params)
            this.$message.success(data.msg)
            this.success()
          }
        } else if (btnItem.name === '取消') {
          this.closed()
        }
      } catch (e) {
        console.log(e)
      } finally {
        btnItem.loading = false
      }
    },
    closed(...args) {
      this.$emit('closed', ...args)
    },
    success(...args) {
      this.$emit('success', ...args)
    }
  }
}
</script>

<style scoped></style>
